<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld"%>
<!DOCTYPE html>
<html>
	<head>
		<title>人员添加</title>
		<!-- 引入公用Js与Css -->
  		<%@include file="/view/common/resource.jsp" %>
	</head>
	<body>
		<div id="wrap">
			
			<div class="clearfix mt10 mr10 ml10">
				<form id="memberForm" class="form-horizontal" action="<%=basePath%>/sys/member/addSave" method="post">
					<input type="hidden" id="memType" name="memType" />
					<dl class="ml10">
						<dd class="clearfix pt10">
							<label class="w80 mr10 pull-left text-right line-height30">用户名:</label>
							<div class="w300 input-group input-group-sm" >
					            <input type="text" class="form-control" id="memName" name="memName" placeholder="请填写账号的用户名(必填项)">
							</div>
						</dd>
						<dd class="clearfix pt5">
							<label class="w80 mr10 pull-left text-right line-height30">手机号码:</label>
							<div class="w300 input-group input-group-sm" >
					            <input type="text" class="form-control" id="memMobile" name="memMobile" placeholder="请填写真实有效的手机号码(必填项)">
					        </div>
						</dd>
						<dd class="clearfix pt5">
							<label class="w80 mr10 pull-left text-right line-height30">登录密码:</label>
							<div class="w300 input-group input-group-sm" >
					            <input type="password" class="form-control" id="memPwd" name="memPwd" placeholder="请填写6-20位长度的登录密码(必填项)">
					        </div>
						</dd>
						<dd class="clearfix pt5">
							<label class="w80 mr10 pull-left text-right line-height30">确认密码:</label>
							<div class="w300 input-group input-group-sm" >
					            <input type="password" class="form-control" id="sureMemPwd" name="sureMemPwd" placeholder="请填写6-20位长度的登录密码(必填项)">
					        </div>
						</dd>
							
						<dd class="clearfix pt5">
							<label class="w80 mr10 pull-left text-right line-height30">真实姓名:</label>
							<div class="w300 input-group input-group-sm" >
					            <input type="text" class="form-control" id="memTrueName" name="memTrueName" placeholder="请填写使用本账号人员的真实姓名">
					        </div>
						</dd>
						<dd class="clearfix pt5">
							<label class="w80 mr10 pull-left text-right line-height30">QQ号:</label>
							<div class="w300 input-group input-group-sm" >
					            <input type="text" class="form-control" id="memQq" name="memQq" placeholder="请填写真实有效的QQ号">
					        </div>
						</dd>
						<dd class="clearfix pt5">
							<label class="w80 mr10 pull-left text-right line-height30">Email地址:</label>
							<div class="w300 input-group input-group-sm" >
					            <input type="text" class="form-control" id="memEmail" name="memEmail" placeholder="请填写真实有效的Email地址">
					        </div>
						</dd>
							
						<dd class="clearfix pt5">
							<label class="w80 mr10 pull-left text-right line-height30">账号状态:</label>
							<div class="w300 input-group input-group-sm" >
								<select id="memStatus" name="memStatus" class="form-control">
									<c:forEach var="item" items="${fns:getDictList('mem_status')}">
										<option value="${item.dictValue }">${item.dictName }</option>
									</c:forEach>
								</select>
					        </div>
						</dd>
						
						<dd class="clearfix pt5">
							<label class="w80 mr10 pull-left text-right line-height30">所属角色:</label>
							<div class="pull-left ml10 w360 radius3  select_div pl5 pt5" >
								<c:forEach var="item" items="${dataList}">
									<input type="checkbox" name="checkedRole" roleCode="${item.roleCode }" value="${item.id }"/>${item.roleName }
								</c:forEach>
					        </div>
						</dd>
					
						<dd class="clearfix pt5 ml110">
							<p class="radius3 bg_blue text-center w200 line-height30 mt5">
								<a href="javascript:" onclick="addSave();" class="color_white show">确认添加</a>
							</p>
						</dd>
					</dl>
				</form>
			</div>
		</div>
		<script type="text/javascript">
	    var validate = null;
	    $(document).ready(function(){
	    	validate = $('#memberForm').validate({
	    		onkeyup:false,
				onfocusout: function(element){
					if (element.value != null && element.value != "") {
						$(element).valid();
					}
			    },
	    		rules:{
					memName:{
						required:true,
						minlength:5,
						maxlength:15,
						lettersOrNumbers:true,
						remote:"checkMemName"
					},
					memMobile:{
						required:true,
						isMobile:true
					},
					memPwd:{
						required:true,
						lettersOrNumbers:true,
						minlength:6,
						maxlength:20
					},
					sureMemPwd:{
						required:true,
						equalTo:"#memPwd"
					},
					memTrueName:{
						isRealName:true
					},
					memQq:{
						isQq:true
					},
					memEmail:{
						email:true
					}
				},
				messages:{
					memName:{
						required:"请输入登录账号",
						remote:"登录账号已存在"
					},
					memMobile:{
						required:"请输入手机号码"
					},
					memPwd:{
						required:"请输入登录密码",
						lettersOrNumbers:"密码是由6-20位数字、字母组成",
						minlength:"密码是由6-20位数字、字母组成",
						maxlength:"密码是由6-20位数字、字母组成"
					},
					sureMemPwd:{
						required:"请输入确认密码",
						equalTo:"您两次输入的密码不一致"
					},
					memEmail:{
						email:"请输入正确的Email地址"
					}
				},
				errorPlacement: function(error, element) {
					layer.tips(error.text(), '#'+element.attr("name"), {
					  tips: [2, '#78BA32']
					});
				}
			});
	    });
	    
    	/* 数据保存 */
	    function addSave() {
	    	var checkboxNum=  $("input[type='checkbox']:checked").length;
	    	if(checkboxNum==0){
	    		layer.msg('请选择一个角色！', {icon:6,time:1000, shade: [0.5,'#000']}, function(){
				})
				return false;
	    	}else if(checkboxNum>1){
	    		layer.msg('只能选择一个角色！', {icon:6,time:1000, shade: [0.5,'#000']}, function(){
				})
				return false;
	    	}
	    	
	    	var roleCode= $("input[type='checkbox']:checked").attr('roleCode');
	    	if(roleCode=='admin'){
	    		$("#memType").val('01');
	    	}else if(roleCode=='branch_manager'){
	    		$("#memType").val('02');
	    	}else if(roleCode=='platform_users'){
	    		$("#memType").val('03');
	    	}
	    	
    		// 验证数据
	    	if (!validate.form()) {
	    		return false;
	    	}
    		
    	    var actionurl=$('#memberForm').attr('action');//提交路径
    	    
    	    $("#memberForm").ajaxSubmit({
    	    	type:"post",
    	    	url:actionurl,
    	    	dataType: "json",
    	    	success:function(data){
        	    	if (data.success) {
    	   	        	// 成功后跳转首页
    	   	            layer.msg("账号添加成功", {icon: 6, time:1000}, function() {
    	   	            	var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    	   	            	parent.layer.close(index);
    	   	            });
    	   	        } else {
    	   	      		// 失败提醒
    	   	        	layer.msg(data.msg, {icon: 5});
    	   	        }
       	    	}
    	    }); 
	    }
    </script>
	</body>
</html>
